<template>
	<div class="icons">
	  <swiper :options="swiperOption">
	   <swiper-slide v-for="page of pages">
		 <div class="icon" v-for="item of page"
		                   :key="item.id">
			<div class="icon-img">
				<img class="icon-img-content" :src="item.imgUrl">
			<p class="icon-desc">{{item.desc}}</p>
		    </div>
		 </div>
	   </swiper-slide>		
	  </swiper>
	</div>
</template>

<script>
export default {
	name: 'HomeIcons',
	data () {
		return {
			swiperOption: {
                loop: true,
                autoplay: false
            },
			iconList: [{
				id: '0001',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
				desc: '热门景点'
			}, {
				id: '0002',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
				desc: '深圳必游'
			}, {
				id: '0003',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/12/216ce2e78b5f5f02.png',
				desc: '万圣狂欢'
			}, {
				id: '0004',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/50/26ffa31b56646402.png',
				desc: '海洋馆'
			}, {
				id: '0005',
				imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20195/b0026eb6f96fd2daecba0d7982c7e4c8.png',
				desc: '约会深圳'
			}, {
				id: '0006',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
				desc: '深圳欢乐谷'
			}, {
				id: '0007',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/a6/6d97515091789602.png',
				desc: '世界之窗'
			}, {
				id: '0008',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/b6/37560ece9c62b502.png',
				desc: '东部华侨城'
			}, {
				id: '0009',
				imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
				desc: '一日游'
			}
			]
		}
	},
	computed: {
		pages () {
			const pages = [];
			this.iconList.forEach((item, index) => {
				const page = Math.floor(index/8)
				if (!pages[page]) {
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages;
		}
	}
}	
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
  .icons >>> .swiper-container
    margin-top: .1rem
    overflow: hidden
    height: 0
    padding-bottom: 50%
    .icon
      height: 0
      position: relative
      overflow: hidden
      float: left
      width: 25%
      padding-bottom: 25%     
      .icon-img
        position: absolute
        top: 0
        right: 0
        left: 0
        bottom: .44rem
        box-sizing: border-box
        padding: .1rem
        .icon-img-content
          display: blcok
          margin: 0 auto
          height: 100%
        .icon-desc
          color: $darkTextColor
          ellipsis()
</style>
